<template>
    <el-main>
        <el-main class="ep-body">
            <el-card class="ep-card">
                <el-form :model="form" name="from" :inline="true">
                    <el-row :gutter="0">
                        <el-col :span="5">
                            <el-form-item label="登录名">
                                <el-input v-model="form.logonName" placeholder="请输入登录名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="姓名">
                                <el-input v-model="form.displayName" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="所属机构">
                                <el-cascader v-model="form.orgId" :options="orgTreeData" :props="props" class="query-cascader"
                                             :change-on-select="true" :filterable="true" ></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="用户状态">
                                <el-select v-model="form.userState" placeholder="请选择用户状态" style="width: 170px">
                                    <el-option
                                        v-for="item in userState"
                                        :key="item.key"
                                        :label="item.label"
                                        :value="item.value">
                                        <span style="float: left">{{ item.label }}</span>
                                        <!--<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>-->
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" align="center">
                            <el-form-item>
                                <el-button @click="queryUserList(true)">查询</el-button>
                                <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-dialog title="添加用户" width="70%" :visible.sync="dialogFormVisible">
                <el-form :model="form1" name="form1" :rules="rules1" ref="form1">
                    <el-row :gutter="20">
                        <ep-input colspan="8" label="登录名" name="logonName" :property="form1.logonName" isChange
                            placeholder="请输入登录名" :datas="{form1: form1}" p="R" ></ep-input>
                        <ep-input colspan="8" label="姓名" name="displayName" :property="form1.displayName"
                            :datas="{form1: form1}" placeholder="请输入姓名" p="R" ></ep-input>
                        <!--<ep-select colspan="8" label="用户类型" name="userType" :property="form1.userType" codetype="USERTYPE" :datas="{form1: form1 }"-->
                            <!--placeholder="请选择用户类型" ></ep-select>-->
                        <el-col :span="8">
                            <el-form-item label="用户类型">
                                <el-select v-model="form1.userType.value" placeholder="请选择用户类型" @change="changeUserType">
                                    <el-option
                                        v-for="item in userTypeCode"
                                        :key="item.key"
                                        :label="item.label"
                                        :value="item.value">
                                        <span style="float: left">{{ item.label }}</span>
                                        <!--<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>-->
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <ep-input type="password" colspan="8" label="密码" name="passWD" :property="form1.passWD"
                                  :datas="{form1: form1}" autocomplete="off" ></ep-input>
                        <ep-input type="password" colspan="8" label="确认密码"
                                  name="passWD1" autocomplete="off" :property="form1.passWD1" :datas="{form1: form1}" ></ep-input>
                        <ep-date colspan="8" label="用户过期时间" name="userExpireDate"
                            :property="form1.userExpireDate" :datas="{form1: form1}" ></ep-date>
                    </el-row>

                    <el-row :gutter="20">
                        <ep-select colspan="8" label="密码过期策略" name="pwExpireType" :property="form1.pwExpireType" codetype="PWEXPIRETYPE"
                            :datas="{form1: form1}" ></ep-select>
                        <ep-date colspan="8" label="密码过期时间" name="pwExpireDate" :property="form1.pwExpireDate"
                            :datas="{form1: form1}" ></ep-date>

                        <ep-select colspan="8" label="证件类型" name="cardType" :property="form1.cardType" codetype="CARDTYPE"
                            :datas="{form1: form1}" ></ep-select>
                    </el-row>
                    <el-row :gutter="20">
                        <ep-input colspan="8" label="证件号码" name="cardId"
                            :property="form1.cardId" :datas="{form1: form1}" ></ep-input>
                        <ep-input colspan="8" label="联系电话" name="tel" :property="form1.tel" :datas="{form1: form1}" ></ep-input>
                        <ep-select colspan="8" label="所属部门" name="department" :property="form1.department"
                            codetype="DEPARTMENT" :datas="{form1: form1}" ></ep-select>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="所属区域">
                                <el-cascader v-model="form1.aa26.value" @change="qeuryOrgTreeData" :options="aa26TreeData" :props="propsAa26"
                                             :change-on-select="true" :disabled="aa26Disabled" :filterable="true" ></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所属经办机构">
                                <el-cascader v-model="form1.orgId.value" :options="orgTreeData" :props="props"
                                             :change-on-select="true" :disabled="orgIdDisabled" :filterable="true" ></el-cascader>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>选择管理区域</span>
                                </div>
                                    <el-tree
                                        :props="propsAa26"
                                        :data="aa26TreeData"
                                        show-checkbox
                                        node-key="aab301"
                                        :default-checked-keys="pitchData"
                                        @check-change="handleCheckChange">
                                    </el-tree>
                            </el-card>

                        </el-col>
                        <el-col :span="16">
                            <template>
                                <el-transfer v-model="form1.roleIds.value"
                                             :data="roleData"
                                             :titles="['可选角色', '已选角色']"
                                ></el-transfer>
                            </template>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <ep-saveButton :datas="{form1: form1}"></ep-saveButton>
                </div>
            </el-dialog>

            <el-card class="ep-card">
                <el-row>
                    <el-table :data="tableData.data" border style="width: 100%;">
                        <el-table-column align="center" prop="logonName" label="登录名"></el-table-column>
                        <el-table-column align="center" prop="displayName" label="姓名"></el-table-column>
                        <el-table-column align="center" prop="orgId" label="所属机构"></el-table-column>
                        <el-table-column align="center" prop="userType" label="用户类型">
                            <template slot-scope="scope">
                                <div v-for="item in userTypeCode">
                                    <span v-if="item.key==scope.row.userType">
                                        {{item.label}}
                                    </span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="userState" label="用户状态">
                            <template slot-scope="scope">
                                <div v-for="item in userState">
                                    <span v-if="item.key==scope.row.userState">
                                        {{item.label}}
                                    </span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" prop="userId">
                            <template slot-scope="scope">
                                <i class="el-icon-edit table-edit-i"
                                    @click="handleEdit(scope.row.userId)"
                                    title="编辑"></i>
                                <i class="el-icon-refresh table-edit-i"
                                    @click="handleReset(scope.row.userId)"
                                    title="重置密码" ></i>
                                <i class="el-icon-delete table-edit-i"
                                    @click="handleLogout(scope.row.userId)"
                                    title="注销用户" ></i>
                                <i class="el-icon-goods table-edit-i"
                                    @click="handleUnlock(scope.row.userId)"
                                    title="解锁" ></i>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        class="table-pagination"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="tableData.page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="10"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.total">
                    </el-pagination>
                </el-row>
            </el-card>
        </el-main>
    </el-main>
</template>

<script src="./sys-user.js"></script>
<style scoped src="./sys-user.css"></style>
